<template>
    <div id="areaDiv">
      <div class="tableDiv">
        <div class="header">
          <Button class="buttonDiv addButton" type="warning" icon="md-add" @click="lightAdd">添加</Button>
        </div>
        <div class="body">
          <Table
            :loading="tableLoading"
            :columns="tableColumns"
            :data="tableData"
            @on-selection-change="tableChose"
            border
          >
            <template
              slot="image"
              slot-scope="{ row ,index }">
              <img style="max-height: 3rem" :src="ajaxUrl + row.lightImg+'?r='+Math.random()"/>
            </template>
            <template
              slot="action"
              slot-scope="{ row ,index }">
              <!--修改-->
              <Button shape="circle" size="small" icon="md-create" type="primary" @click="updateLine(row)" style="margin-right: 15px"></Button>
              <!--删除-->
              <Button shape="circle" size="small" icon="ios-trash" type="error" @click="deleteLine(row)"></Button>
            </template>
            <template
              slot="type"
              slot-scope="{ row ,index }">
              <Button type="primary" v-if="row.isDefault==1" size="small" ghost style="width: 4em" >默认</Button>
              <Button type="success" size="small" ghost style="width: 4em" @click="undateDefault(row)" v-else>非默认</Button>
            </template>

          </Table>
        </div>
        <div class="footer">
          <div class="commonFooterBtn">
            <Button class="buttonDiv" :disabled="tableChoseList.length<=0" @click="deleteChose" icon="ios-trash-outline" type="error">删除</Button>
          </div>
          <div class="commonFooterPage">
            <Page class="pageLine" :total="pageMsg.pageTatol" :page-size="pageMsg.pageSize" :current="pageMsg.pageNo" @on-change="pageChange"/>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
          const validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请填写地区'));
            } else {
              this.$app.post('/area/examineArea', {
                areaName:value
              }).then((res)=>{
                if(res.data.code==0){
                  callback();
                }else{
                  callback(new Error('重复地区'));
                }
                // console.log(res);
              }).catch((res)=>{
                //console.log(response);
              });

            }
          };
          return{
            ajaxUrl:ajaxUrl,
            addModal:false,
            updateModal:false,
            tableLoading:false,
            tableChoseList:[],
            pageMsg:{
              pageNo:1,//当前页
              pageSize:10,//每页行数
              pageTatol:12,//总数
            },
            formModal:{
              pkid:0,
              lightName:"",//产品名
              lightModal:"",//型号
              lightTrait:"",//特征
              scenarios:"",//场景
              lightKindsId:0,//产品种类
              lightKindsName:""//产品种类名
            },
            isDefault: false,
            formMsgRule:{
              areaName: [
                { required: true, message: '请输入区域名', trigger: 'blur' },
                { validator: validatePass, trigger: "blur" },
              ],
              isDefault:[
                { required: true}
              ],
            },
            tableData:[],
            tableColumns: [
              {
                type: 'selection',
                width: 60,
                align: 'center'
              },
              {
                title: "商品图片",
                align: "center",
                slot: "image",
                width: 200,
              },
              {
                title:"产品名称",
                key:"lightName",
                align: 'center'
              },
              {
                  title:"产品名称",
                  key:"enlightName",
                  align: 'center'
              },
              {
                title:"产品型号",
                key:"lightModal",
                align: 'center'
              },
              {
                  title:"相关认证",
                  key:"attestation",
                  align: 'center'
              },
              {
                title:"产品特征",
                key:"lightTrait",
                align: 'center'
              },
              {
                  title:"英文特征",
                  key:"enlightTrait",
                  align: 'center'
              },
              {
                title:"产品种类",
                key:"kindName",
                align: 'center',
              },
              {
                title:"适用场景",
                key:"scenarios",
                align: 'center'
              },
              {
                title:"产品名称",
                key:"enScenarios",
                align: 'center'
              },
              {
                title: "操作",
                align: "center",
                slot: "action",
                width: 200,
              },
            ]
          }
        },
      methods:{
        //选择框选择
        tableChose(selection, row){
          this.tableChoseList=selection
        },
        //点击修改按钮
        updateLine(row){
          this.$router.push({
              name:'lightUpdate',
              query:{
                lightId:row.pkid,
              }
            });
        },
        //删除单选
        deleteLine(row){
          // console.log("点击了删除::",row);
          let that=this;
          // console.log("删除：：",);
          this.$app.post('/light/deleteLights', {
            pkids:[row.pkid]
          }).then((res)=>{
            if(res.data.code==0){
              that.$Message.success("删除成功");
              that.getAllTableData();
              // that.tableChoseList=[];
            }else{
              that.$Message.error("删除失败")
            }


            // console.log(res);
          }).catch((res)=>{
            //console.log(response);
          });

        },
        //删除多选
        deleteChose(){
          let that=this;
          // console.log("删除：：",);
          this.$app.post('/light/deleteLights', {
            pkids:that.tableChoseList.map(item => item.pkid)
          }).then((res)=>{
            if(res.data.code==0){
              that.$Message.success("删除成功");
              that.getAllTableData();
              that.tableChoseList=[];
            }else{
              that.$Message.error("删除失败")
            }
            // console.log(res);
          }).catch((res)=>{
            //console.log(response);
          });

        },

        pageChange(pageNum){
          this.pageMsg.pageNo=pageNum
          this.getAllTableData();
        },
        getAllTableData(){
          var that=this;

          this.$app.post('/light/getLightPage', {
            pageNo:that.pageMsg.pageNo,
            pageSize: that.pageMsg.pageSize
          }).then((res)=>{
            if(res.data.code==0){
              that.tableData=res.data.data.list;
              that.pageMsg.pageTatol=res.data.data.total;
            }
            // console.log(res);
          }).catch((res)=>{
            //console.log(response);
          });
        },
        //修改默认值
        undateDefault(row){
          let that=this;

          this.$app.post('/area/updateDefaultArea', {
            pkid:row.pkid
          }).then((res)=>{
            if(res.data.code==0){
                that.$Message.success("修改成功");
                that.getAllTableData();
            }
            // console.log(res);
          }).catch((res)=>{
            //console.log(response);
          });
        },
        lightAdd(){
            // lightAdd
            this.$router.push({
                name:'lightAdd',
            });
        }
      },
      mounted() {
        this.getAllTableData();
      }
    }
</script>

<style lang="less" scoped>
  #areaDiv{
    width: 100%;
    height: 100%;

    &>.tableDiv{
      .header{
        &>.buttonDiv{
          margin: .5rem 0 .5rem .5rem;
        }
        &>.addButton{

        }
      }

      .body{
        margin:0 0.5rem;
      }
      .footer{
        .commonFooterBtn,.commonFooterPage{
          margin: .5rem;
        }
        .commonFooterBtn{
          float: left;
        }
        .commonFooterPage{
          float: right;
        }
      }
    }
  }
</style>
